<template>
	<view class="fixAuto bb middle">
		<view :style="{width : titleWidth + 'rpx'}" v-if="title">
			{{title}}
		</view>
		<view>
			<textarea type="text"
				:auto-height="true"
				:focus="focus"
				:disabled="disabled" 
				:value="valueSync" 
				:placeholder="_place" 
				@input="_changeValue"
				@focus="onFocus"
				@blur="onBlur"/>
		</view>
		<view v-if="addOn" class="grey fz12 w10">
			{{addOn}}
		</view>
	</view>
</template>

<script>
	export default {
		name:"inputs",
		props:{
			title : String ,
			addOn : String ,
			disabled : Boolean ,
			name : String ,
			value : {
				type : String,
				default : ""
			},
			placeholder : String ,
			titleWidth : {
				type : [String , Number] ,
				default : 200
			}
		},
		data() {
			return {
				focus : false ,
				showList : false ,
				valueSync : '' ,
				timeOut : null 
			};
		},
		watch:{
			value : {
				handler(){
					this.valueSync = this.value || '';
				},
				immediate : true 
			}
		},
		computed:{
			_place(){
				return !this.placeholder && !!this.title ? `请输入${this.title}` : this.placeholder ;
			}
		},
		methods:{
			_changeValue(e){
				this.valueSync = e.detail.value ;
				this.$emit("input" , this.valueSync) ;
			},
			onFocus(){
				this.focus = true ;
			},
			onBlur(){
				this.focus = false ;
			}
		}
	}
</script>
